<template>
	<div class="menu">
		<el-row class="menu-card" :gutter="0" type="flex" justify="start">
			<el-col
				:style="{ width: cardwidth }"
				v-for="item in menuList"
				:key="item._id"
			>
				<el-card :body-style="{ padding: '0px' }">
					<router-link
						:to="{
							name: 'detail',
							query: { menuId: item.menuId, userId: item.userId },
						}"
					>
						<img :src="item.product_pic_url" class="image" />
						<div style="padding: 14px" class="menu-card-detail">
							<h3>{{ item.title }}</h3>
							<div class="comment-len">
								{{ item.comments_len }} 评论
							</div>
							<!-- a标签不包裹 a 标签， 使用其他标签替换 -->
							<router-link
								:to="{
									name: 'userspace',
									query: { userId: item.userId },
								}"
								tag="span"
							>
								<!-- 显示的是 span 标签 超链接有效 -->
								<div class="author">{{ item.name }}</div>
							</router-link>
						</div>
					</router-link>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	props: {
		menuList: {
			type: Array,
			default: () => [], // 是一个函数 返回值是一个数组
		},
		cardwidth: {
			type: String,
			default: () => '228px',
		},
	},
};
</script>

<style lang='sass' scoped>
.menu-card
	flex-wrap: wrap
	.el-col
		margin: 10px 5px
		width: 228px
		box-shadow: 0 0 5px rgba(0,0,0,0.3)
		img
			height: 262px
			min-width: 100%
		.menu-card-detail
			h3
				font-size: 18px
				color: #ff0000
				line-height: 1.5em
				// 超出部分显示省略号
				display: block
				white-space: nowrap
				overflow: hidden
				text-overflow: ellipsis
			.comment-len
				color: #888
				font-size: 12px
				line-height: 2em
			.author
				color: #c90000
				font-size: 12px
.loading
	width: 100%
	text-align: center
	font-size: 14px
	margin: 20px auto
</style>